<template>
  <div class="order-review-new">
    <van-nav-bar left-arrow fixed placeholder :border="false"
                 title="评价" right-text="提交"
                 @click-left="$router.back()" @click-right="handleReviews"/>
    <white-space/>
    <order-review-new-item v-for="([item, review]) in reviews"
                           :key="item.id" :item="item" :review="review"/>
    <div class="services-ratings">
      <van-cell title-class="services-ratings-title" title="服务打分" border center/>
      <white-space/>
      <van-cell-group :border="false">
        <van-cell class="services-ratings-line"
                  value-class="services-ratings-line-value"
                  title="商品描述" :border="false" center>
          <template #default>
            <van-rate v-model="productRating" :size="20" void-icon="star" void-color="#eee"/>
          </template>
        </van-cell>
        <van-cell class="services-ratings-line"
                  value-class="services-ratings-line-value"
                  title="商家服务" :border="false" center>
          <template #default>
            <van-rate v-model="storeRating" :size="20" void-icon="star" void-color="#eee"/>
          </template>
        </van-cell>
        <van-cell class="services-ratings-line"
                  value-class="services-ratings-line-value"
                  title="发货物流" :border="false" center>
          <template #default>
            <van-rate v-model="shippingRating" :size="20" void-icon="star" void-color="#eee"/>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <white-space/>
  </div>
</template>

<script>
import { message, order as Order } from "@mall/api-services"
import * as _ from "lodash"
import WhiteSpace from "@/components/WhiteSpace"
import { Button, Cell, CellGroup, Icon, NavBar, Rate, Toast, Uploader } from "vant"
import OrderReviewNewItem from "@/views/order/OrderReviewNewItem"
import WingBlank from "@/components/WingBlank"


export default {
  name: "OrderReviewNew",
  components: {
    WingBlank,
    OrderReviewNewItem,
    WhiteSpace,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Rate.name]: Rate,
    [Uploader.name]: Uploader,
  },
  props: {
    orderId: String,
  },
  data() {
    return {
      reviews: [],
      productRating: 5,
      storeRating: 5,
      shippingRating: 5,
    }
  },
  created() {
    this.refreshOrder()
  },
  methods: {
    refreshOrder() {
      const { orderId } = this
      Toast.loading()
      Order.OrderServiceV1.getOrder(orderId)
          .then(aOrder => {
            this.reviews = _.map(aOrder.items, item => {
              const review = _.assign(new Order.OrderReview(), {
                itemId: item.id,
                bodyType: "text",
                rating: 5,
              })
              return [item, review]
            })
          })
          .finally(() => Toast.clear())
    },
    handleReviews() {
      const { orderId, productRating, storeRating, shippingRating } = this

      const ratings = [
        _.assign(new Order.OrderRating(), {
          type: Order.OrderRatingType.ProductPricing,
          rating: productRating,
        }),
        _.assign(new Order.OrderRating(), {
          type: Order.OrderRatingType.CustomerService,
          rating: storeRating,
        }),
        _.assign(new Order.OrderRating(), {
          type: Order.OrderRatingType.ProductShipping,
          rating: shippingRating,
        }),
      ]

      const reviews = _.map(this.reviews, ([, review]) => review)
      Toast.loading()
      Promise.all([
        Order.OrderServiceV1.reviewOrder(orderId, reviews),
        Order.OrderServiceV1.ratingOrder(orderId, ratings),
      ]).then(() => {
        Toast.success("评价成功")
        this.$router.replace({
          path: `/orders/reviews`,
          query: {
            statutes: Order.OrderStatus.Reviewed,
          },
        })
      }).catch(({ response }) => Toast(message.getResponseMessage(response)))

    },
  },
}
</script>

<style lang="scss" scoped>
.order-review-new {

  .services-ratings {
    background: #fff;

    .services-ratings-title {
      font-size: 16px;
    }

    .services-ratings-line {
      padding: 0 16px 12px 16px;

      .services-ratings-line-value {
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
</style>
